<template>
  <div>
    <a-drawer
      title="客户详情"
      width="1100"
      :maskClosable="false"
      :visible="detailData.show"
      direction="rtl"
      @close="handleClose"
    >
      <div slot="title">
        <!-- <i class="el-icon-arrow-left"></i> -->
        <span>客户详情</span>
      </div>
      <el-row v-loading="loading" style="width:1120px;padding-bottom:280px;height:100%;overflow-y:auto">
        <el-col :span="18">
          <el-form
            :model="parames"
            label-position="left"
            ref="parames"
            label-width="94px"
            class="detailForm"
          >
            <el-row style="padding: 0 40px">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="资料" name="info">
                  <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    <a-collapse-panel class="marginB10" header="基础信息" key="1">
                      <el-col :span="24">
                        <el-form-item label="客户标签:">
                          <el-tag size="small" v-for="(item,index) in parames.customerLabel" :key="index">{{item}}</el-tag>
                        </el-form-item>
                        <!-- <el-form-item label="客户id:">
                          <span>{{parames.id}}</span>
                        </el-form-item> -->
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="公司名称:">
                              <span>{{parames.customerName}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="简称:">
                              <span>{{parames.shortName}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="是否废业:">
                              <span>{{parames.wasteIndustry?'是':'否'}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>

                        
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="客户信用代码:">
                              <span>{{parames.creditCode}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="客户等级:">
                              <span v-if="parames.customerLevel">{{parames.customerLevel.desc}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="企业电话:">
                              <span>{{parames.businessPhone}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="企业邮箱:">
                              <span>{{parames.businessEmail}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                        <el-form-item label="联系地址:">
                          <span>{{parames.address}}</span>
                        </el-form-item>
                        <el-form-item label="备注:">
                          <span>{{parames.remark}}</span>
                        </el-form-item>
                        <el-row>
                          <el-col :span="12">
                            <el-form-item label="客户来源:">
                              <span v-if="parames.customerSourceType">{{parames.customerSourceType.desc}}-{{parames.customerSource}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="负责人:">
                              <span>{{parames.director}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="创建人:">
                              <span>{{parames.createBy}}</span>
                            </el-form-item>
                          </el-col>
                          <el-col :span="12">
                            <el-form-item label="创建时间:">
                              <span>{{parames.createDate | formatDate}}</span>
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-col>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="工商信息" key="2">
                      <el-col :span="12">
                        <el-form-item label="主营行业:">
                          <span>{{parames.businessInfoDO.industry || '无'}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="企业类型:">
                          <span>{{parames.businessInfoDO.companyType || '无'}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="法定代表人:">
                          <span>{{parames.businessInfoDO.artificialPerson || '无'}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="注册资金:">
                          <span v-if="parames.businessInfoDO.registeredCapital">{{parames.businessInfoDO.registeredCapital + '万元'}}</span>
                          <span v-else>无</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="成立日期:">
                          <span>{{parames.businessInfoDO.establishmentDate | formatDate}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="出执照日期:">
                          <span>{{parames.businessInfoDO.licenseDate | formatDate}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="工商开始时间:">
                          <span>{{parames.businessInfoDO.businessStartDate | formatDate}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="工商结束时间:">
                          <span>{{parames.businessInfoDO.businessEndDate | formatDate}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="营业期限截止:">
                          <span>{{parames.businessInfoDO.businessDeadlineDate | formatDate}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="核准日期:">
                          <span>{{parames.businessInfoDO.approvalDate | formatDate}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="注册行政区域:">
                          <span>{{parames.area}}</span>
                        </el-form-item>
                      </el-col>
                      <!-- <el-col :span="12">
                        <el-form-item label="注册区域:">
                          <span>{{parames.businessInfoDO.registeredRegionId || '无'}}</span>
                        </el-form-item>
                      </el-col> -->
                      <el-col :span="24">
                        <el-form-item label="注册详细地址:">
                          <span>{{parames.businessInfoDO.registeredAddress || '无'}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="经营范围:">
                          <span>{{parames.businessInfoDO.businessScope || '无'}}</span>
                        </el-form-item>
                      </el-col>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="人员信息" key="3">
                      <el-table :data="parames.customerContactsList" style="width: 100%">
                        <el-table-column prop="contactsName" label="姓名" width="180"></el-table-column>
                        <el-table-column prop="contactsRole" label="角色">
                          <template slot-scope='scope'>
                            <span v-if="scope.row.contactsRoleName">{{scope.row.contactsRoleName.join(',')}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="contactsMobile" label="手机号"></el-table-column>
                        <el-table-column prop="remark" label="备注"></el-table-column>
                        <el-table-column prop="address" label="操作">
                          <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-search" @click="handleSearch(scope.row)"></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="财税信息" key="4" v-if="parames.financialInfoDO">
                      <!-- <el-col :span="24">
                          <el-tag size="small">代理记账</el-tag>
                      </el-col> -->
                      <el-col :span="12">
                        <el-form-item label="财税类型:">
                          <span v-if="parames.financialInfoDO.taxType">{{parames.financialInfoDO.taxType.desc}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="报税类别:">
                          <span v-if="parames.financialInfoDO.declareTaxType">{{parames.financialInfoDO.declareTaxType.desc}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="是否零申报:">
                          <span>{{parames.financialInfoDO.zeroDeclaration?'是':'否'}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="税务所:">
                          <span>{{parames.financialInfoDO.taxOffice}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="税盘:">
                          <span v-if="parames.financialInfoDO.taxPlate">{{parames.financialInfoDO.taxPlate.desc}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="专营员姓名:">
                          <span>{{parames.financialInfoDO.franchiseeName}}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="专营员电话:">
                          <span>{{parames.financialInfoDO.franchiseePhone}}</span>
                        </el-form-item>
                      </el-col>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="文档资料" key="5">
                      <el-table :data="parames.customerFileList" style="width: 100%">
                        <el-table-column prop="fileName" label="文件名" width="180"></el-table-column>
                        <el-table-column prop="fileType" label="文件类型"></el-table-column>
                        <el-table-column prop="fileSize" label="大小">
                          <template slot-scope="scope">
                            <p>{{scope.row.fileSize}}kb</p>
                          </template>
                        </el-table-column>
                        <el-table-column prop="modifyDate" label="最近上传时间">
                          <template slot-scope="scope">
                            <p>{{scope.row.modifyDate | formatDate}}kb</p>
                          </template>
                        </el-table-column>
                        <!-- <el-table-column prop="address" label="上传人"></el-table-column> -->
                        <el-table-column prop="address" label="操作">
                          <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownFile(scope.row)"></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </a-collapse-panel>
                    <a-collapse-panel class="marginB10" header="账户信息" key="6">
                      <el-row style="margin-top: 20px" :gutter="14">
                        <el-col :span="8" v-for="(item,index) in parames.customerAccountList" :key="index">
                          <el-card class="box-card" shadow="never">
                            <div slot="header" class="clearfix">
                              <span v-if="item.accountType == 'BANK'">银行账户</span>
                              <span v-if="item.accountType == 'ALIPAY'">支付宝账户</span>
                              <span v-if="item.accountType == 'WE_CHAT'">微信账户</span>
                              <span v-if="item.accountType == 'CASH'">现金账户</span>
                              <!-- <el-button style="float: right; padding: 3px 0;" icon="el-icon-delete" type="text" @click="handleCanleAccount(index,item)"></el-button> -->
                              <!-- <el-button style="float: right; padding: 3px 0;margin-right: 10px" icon="el-icon-edit" type="text" @click="handleEditAccount(index,item)"></el-button> -->
                            </div>
                            <div>
                              <p>{{item.cardNumber}}</p>
                              <p>{{item.realName}}</p>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </a-collapse-panel>
                  </a-collapse>
                </el-tab-pane>
                <el-tab-pane label="合同" name="hetong">
                  <el-col :span="24">
                    <el-row :gutter="20" type="flex">
                      <el-col>
                        <div class="hetong-title">
                          <p>总服务额</p>
                          <h1>{{hetongData.totalServiceAmount}}</h1>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="hetong-title">
                          <p>总代收额</p>
                          <h1>{{hetongData.totalRemainingAmount}}</h1>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="hetong-title">
                          <p>总实收额</p>
                          <h1>{{hetongData.totalReceiptedAmount}}</h1>
                        </div>
                      </el-col>
                      <el-col>
                        <div class="hetong-title">
                          <p>总开票额</p>
                          <h1>{{hetongData.totalInvoicingAmount}}</h1>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row style="margin-top:20px">
                      <el-col :span="12">
                        <span>服务记录</span>
                      </el-col>
                      <!-- <el-col :span="12" style="text-align:right">
                        <span style="cursor:pointer">
                          <a-icon type="swap" />
                          <span>按任务显示</span>
                        </span>
                      </el-col> -->
                    </el-row>
                    <a-collapse style="margin-top:10px">
                        <a-collapse-panel v-for="(item,index) in hetongData.contractList" :key="index" class="hetong-icon">
                          <div style="margin-left:20px" slot="header">
                            <el-row>
                              <el-col :span="12">
                                <span>合同流水号:</span>
                                <span>{{item.id}}</span>
                              </el-col>
                              <el-col :span="12" style="text-align:right;">
                                <span>签订金额:</span>
                                <span style="margin-right: 15px;">￥{{item.contractAmount}}</span>
                              </el-col>
                            </el-row>
                          </div>
                          <el-table :data="item.contractProductList" style="width: 100%">
                            <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
                            <el-table-column prop="contractProductStatus" label="服务状态">
                              <template slot-scope='scope'>
                                <p v-if="scope.row.contractProductStatus">{{scope.row.contractProductStatus.desc}}</p>
                              </template>
                            </el-table-column>
                            <el-table-column prop="taskProgress" label="任务进度"></el-table-column>
                            <el-table-column prop="remainingAmount" label="待收金额"></el-table-column>
                          </el-table>
                        </a-collapse-panel>
                    </a-collapse>
                    <a-collapse :defaultActiveKey="activeNames2" :bordered="false">
                      <a-collapse-panel class="marginB10" header="收款记录" key="1">
                        <el-table :data="hetongData.receiptDetailList" style="width: 100%">
                          <el-table-column prop="receiptStatus" label="状态">
                              <template slot-scope="scope">
                                <div v-if="scope.row.receiptStatus">{{scope.row.receiptStatus.desc}}</div>
                              </template>
                          </el-table-column>
                          <el-table-column prop="receiptAmount" label="收款金额"></el-table-column>
                          <el-table-column prop="productName" label="产品名称"></el-table-column> 
                          <el-table-column prop="receiptDate" label="收款时间">
                            <template slot-scope="scope">
                              <span>{{scope.row.createDate | formatDate}}</span>
                            </template>
                          </el-table-column>
                          <!-- <el-table-column prop="address" label="操作"></el-table-column> -->
                        </el-table>
                      </a-collapse-panel>
    
                      <a-collapse-panel class="marginB10" header="开票记录" key="3">
                        <el-table :data="hetongData.invoicingList" style="width: 100%">
                          <el-table-column prop="invoiceType" label="发票类型">
                            <template slot-scope="scope">
                                <div v-if="scope.row.invoiceType">{{scope.row.invoiceType.desc}}</div>
                              </template>
                          </el-table-column>
                          <el-table-column prop="reviewStatus" label="状态">
                            <template slot-scope="scope">
                                <div v-if="scope.row.reviewStatus">{{scope.row.reviewStatus.desc}}</div>
                              </template>
                          </el-table-column>
                          <el-table-column prop="applicationAmount" label="开票金额"></el-table-column>
                          <el-table-column prop="confirmDate" label="审核时间">
                            <template slot-scope="scope">
                              <span>{{scope.row.confirmDate | formatDate}}</span>
                            </template>
                          </el-table-column>
                          <!-- <el-table-column prop="address" label="操作"></el-table-column> -->
                        </el-table>
                      </a-collapse-panel>
                      <a-collapse-panel class="marginB10" header="商机列表" key="4">
                        <el-table :data="hetongData.opportunityList" style="width: 100%">
                          <!-- <el-table-column prop="name" label="产品类型" width="180"></el-table-column> -->
                          <el-table-column prop="opportunityStatus" label="状态">
                            <template slot-scope="scope">
                              <span v-if="scope.row.opportunityStatus">{{scope.row.opportunityStatus.desc}}</span>
                            </template>
                          </el-table-column>
                          <el-table-column prop="opportunitySource" label="商机来源"></el-table-column>
                          <!-- <el-table-column prop="address" label="创建人"></el-table-column> -->
                          <el-table-column prop="createDate" label="创建时间">
                            <template slot-scope="scope">
                              <span>{{scope.row.createDate | formatDate}}</span>
                            </template>
                          </el-table-column>
                          <!-- <el-table-column prop="address" label="操作"></el-table-column> -->
                        </el-table>
                      </a-collapse-panel>
                    </a-collapse>
                  </el-col>

                </el-tab-pane>
                <el-tab-pane label="动态" name="dongtai">
                    <el-col :span="24">
                        <el-row>
                            <el-col :span="24">
                                <el-button :type="dongtaiShow?'primary':'text'" size="mini" round @click="dongtaiShow = true">跟进动态</el-button>
                                <el-button size="mini" :type="!dongtaiShow?'primary':'text'" round @click="dongtaiShow = false">操作历史</el-button>
                            </el-col>
                            <el-col :span="24" style="margin-top:30px" v-show="dongtaiShow">
                                <!-- for循环记录 -->
                                <el-row type="flex" style="margin-bottom: 20px" v-for="(item,index) in trendsList" :key="index">  
                                    <el-col style="width: 40px">
                                        <el-avatar size="small">{{item.name}}</el-avatar>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row>
                                            <el-col :span="24">
                                                <p style="font-size:13px;color:#646464l">
                                                    <span style="color: #bfbfbf">{{item.createBy}}</span>
                                                    <span>添加了</span>
                                                    <span style="color: #bfbfbf" v-if="item.typeEnum">客户 ‧ {{item.typeEnum.desc}}</span>
                                                    <span style="color: #bfbfbf">{{item.createDate | formatDate2}}</span>
                                                </p>
                                            </el-col>
                                            <el-col :span="24" style="margin-top:10px;">
                                                <p class="genjin-text">{{item.content}}</p>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                            <el-col :span="24" style="margin-top:30px" v-show="!dongtaiShow">
                                <el-row type="flex" style="margin-bottom: 20px" v-for="(item,index) in origanList" :key="index">  
                                    <el-col style="width: 20px">
                                        <i class="el-icon-edit" style="color:#bfbfbf;font-size:12px;"></i>
                                    </el-col>
                                    <el-col :span="20">
                                        <el-row>
                                            <el-col :span="24">
                                                <p style="font-size:13px;color:#646464l">
                                                    <span style="color: #bfbfbf">{{item.operator}}</span>
                                                    <span v-if="item.operationType">{{item.operationType.desc}}·客户</span>
                                                    <span style="color: #bfbfbf">{{item.createDate | formatDate2}}</span>
                                                </p>
                                            </el-col>
                                            <el-col :span="24" style="margin-top:10px;" v-if="item.operationContent">
                                                <p class="genjin-text2">{{item.operationContent}}</p>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-tab-pane>
              </el-tabs>
            </el-row>
          </el-form>
        </el-col>
        <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
          <div class="form-team-box">
            <div>
              <el-button
                size="small"
                icon="el-icon-edit"
                @click.native="handleEdit"
                style="width:200px;text-align: left;margin-bottom:10px"
              >编辑内容</el-button>
              <!-- <el-popover
                placement="bottom"
                width="200"
                trigger="hover"
                >
                <el-row>
                    <el-col>
                        <div class="drp-text">
                            <i class="el-icon-document"></i>
                            <span>合同</span>
                        </div>
                    </el-col>
                    <el-col>
                        <div class="drp-text">
                            <i class="el-icon-discover"></i>
                            <span>商机</span>
                        </div>
                    </el-col>
                </el-row>
                <el-button size="small"  slot="reference" style="width:200px;text-align: left">
                    <i class="el-icon-menu"></i>
                    <span>为客户创建</span>
                    <i style="float: right" class="el-icon-arrow-down"></i>
                </el-button>
              </el-popover> -->
              <el-button
                size="small"
                icon="el-icon-refresh"
                @click="handlePerson"
                style="width:200px;text-align: left;margin:0 0 10px 0;"
              >转移负责人</el-button>
              <el-button
                size="small"
                @click="handleYuan"
                icon="el-icon-warning-outline"
                style="width:200px;text-align: left;margin:0 0 10px 0;"
              >变更来源</el-button>
              <el-button
                size="small"
                @click="handleSetBlack"
                icon="el-icon-coin"
                v-if="blackBtn"
                style="width:200px;text-align: left;margin:0 0 10px 0;"
              >设置黑名单</el-button>
              <el-button
                size="small"
                @click="handleSetFei"
                icon="el-icon-files"
                v-if="feiBtn"
                style="width:200px;text-align: left;margin:0 0 10px 0;"
              >设置废业状态</el-button>
              <a-popconfirm
                title="是否确认删除?"
                @confirm="handleCustomer"
                okText="是"
                cancelText="否"
              >
                <!-- <el-button size="mini" type="text" icon="el-icon-delete"></el-button> -->
                <el-button
                  size="small"
                  icon="el-icon-delete"
                  style="width:200px;text-align: left;margin:0 0 10px 0;"
                >删除客户</el-button>
              </a-popconfirm>
              
            </div>
            <p class="formtitle" v-if="parames.userIdList">团队成员（{{parames.userIdList.length}}）人</p>
            <el-row style="margin-top:10px">
              <span v-for="(item,index) in parames.userIdList" :key="index">
                  <el-col style="margin-bottom:10px" v-if="index==0" >
                    <span class="team-icon" style="background: #409efe" v-if="item.userName">{{item.userName.slice(0,1)}}</span>
                    <span class="team-name">{{item.userName}}</span>
                  </el-col>
                  <el-col style="margin-bottom:10px" v-if="index>0" >
                    <span class="team-icon" style="background: #409efe" v-if="item.userName">{{item.userName.slice(0,1)}}</span>
                    <span class="team-name">{{item.userName}}</span>
                    <i class="el-icon-delete team-del" @click="handleDeleteUser(index,item)"></i>
                  </el-col>
                </span>
            </el-row>
            <el-button type="text" style="margin-top:14px" @click="handleAddTeam" icon="el-icon-plus">添加新成员</el-button>
          </div>
        </el-col>
      </el-row>

      <div class="detail-from-bottom-box" :class="{height56: !isFabu, height200:isFabu}">
          <el-row type="flex" v-show="!isFabu">
              <el-col style="width:40px;">
                <el-avatar size="small" icon="el-icon-user-solid" style="margin-top:12px"></el-avatar>
              </el-col>
              <el-col :span="24">
                  <el-input type="text" placeholder="添加动态..." size="small" @focus="isFabu = true"></el-input>
              </el-col>
          </el-row>
          <el-row type="flex" v-if="isFabu">
              <el-col style="width:40px;">
                <el-avatar size="small" style="margin-top:12px" icon="el-icon-user-solid"></el-avatar>
              </el-col>
              <el-col :span="24">
                  <el-row>
                      <el-col :span="24">
                        <el-tag style="margin-right:5px;cursor:pointer" size="small" @click="typeEnum = item.name" v-for="(item,index) in trendsTypeData"  :key="index" :type="typeEnum==item.name?'':'info'">{{item.desc}}</el-tag>
                      </el-col>
                      <el-col :span="24">
                          <el-select size="small" v-model="trendsReasonId" placeholder="请选择动态原因" @change="changTrends">
                            <el-option v-for="(item,index) in trendsData" :key="index" :label="item.trendsReasonName" :value="item.id"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="24">
                          <el-input v-model="content" type="textarea" placeholder="添加动态..." resize="none"></el-input>
                      </el-col>
                      <el-col :span="24" style="text-align:right">
                          <el-button size="small" @click="isFabu = false">取消</el-button>
                          <el-button size="small" @click="handleFabu" :loading="floading" type="primary">发布</el-button>
                      </el-col>
                  </el-row>
              </el-col>
          </el-row>
      </div>
    </a-drawer>
    <createCustomerdDialog :dialogData="dialogData" @checkRender="render" @checkOpen="checkOpen"></createCustomerdDialog>
    <addUserhDialog ref="adduser" :addUserData="addUserData"></addUserhDialog>
    <teamDialog :teamData="teamData" @selectUser="selectUser"></teamDialog>
    <transCreated :createdData="createdData" @checkRender="checkRender"></transCreated>
    <transOrigin :laiyuanData="laiyuanData" @checkRender="checkRender"></transOrigin>
    <setBlackList :blackData="blackData" @checkRender="checkRender"></setBlackList>
  </div>
</template>

<script>
import createCustomerdDialog from "./createdCustomerDialog.vue"; //修改客户
import addUserhDialog from "./addCustomerUser.vue"; //添加人员详情
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
import transCreated from '../opportunityManage/transCreated' //变更负责人
import transOrigin from './transOrigin' //更改来源
import setBlackList from './setBlackList' //更改来源

export default {
  props: ["detailData"],
  data() {
    return {
      floading: false,
      loading: false,
      dongtaiShow: true,
      blackBtn: false,
      feiBtn: false,
      activeKey: ['1','2','3','4','5','0'],
      activeNames: ['1','2','3','4','5','6'],
      activeNames2: ['1','2','3','4'],
      isFabu: false, //是否打开下面的输入跟踪信息
      parames: {
        businessInfoDO: {},
        financialInfoDO: {}
      },
      laiyuanData: {
        show: false
      },
      blackData: {
        show: false,
      },
      teamData: {
        show: false
      },
      createdData: {
        show: false
      },
      addUserData: {
        customerId: '', //客户id
        id: '', //客户人员id
        type: '',
        data: {},
        show: false
      },
      dialogData: {
        type: '',
        id: '',
        title: '',
        show: false
      },
      activeName: "info",
      typeEnum: '', //动态类型id
      content: '', //动态内容
      origanList: [], //操作轨迹
      trendsData: [], //动态原因下拉值
      trendsReasonId: '', //动态原因
      trendsTypeData: [], //动态类型
      trendsList: [], //动态数据
      tableData: [],
      hetongData: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    handleClick() {
      //切换主tab
      if (this.activeName == 'dongtai') {
        this.getTrendsList()
      } else if (this.activeName == 'hetong') {
        this.getHetongList()
      }
    },
    checkRender () {
      this.render()
      this.$emit('checkRender')
    },
    handleSetBlack () { //设置黑名单
      this.blackData.id = this.detailData.id
      this.blackData.title = '设置黑名单'
      this.blackData.type = 'black'
      this.blackData.blacklisted = this.parames.blacklisted
      this.blackData.show = true
    },
    handleSetFei () { //设置废业状态
      this.blackData.id = this.detailData.id
      this.blackData.title = '设置废业状态'
      this.blackData.type = 'feiye'
      this.blackData.blacklisted = this.parames.wasteIndustry
      this.blackData.show = true
    },
    getHetongList () {
      this.$post(this.$api.postContractFindCustomerContractTab,{ //操作历史
          customerId: this.detailData.id
        }).then(response => {
          if (response.data.succeed) {
            this.hetongData = response.data.data
          }
        })
    },
    getTrendsList () {
      this.$post(this.$api.postTrendsCustomerList,{
          customerId: this.detailData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            data.forEach(el=>{
              el.name = el.createBy.slice(0,1)
            })
            this.trendsList = data
          }
        })
      this.$post(this.$api.postRecordNormalList,{ //操作历史
          projectId: this.detailData.id
        }).then(response => {
          if (response.data.succeed) {
            this.origanList = response.data.data
          }
        })
    },
    changTrends (id) {
      let obj = {}
      obj = this.trendsData.find((item)=>{
        return item.id === id;//筛选出匹配数据
      });
      this.content = obj.trendsReasonName
    },
    handleFabu () { //发布动态内容
      if (!this.content) {
        this.$message.error('请输入动态内容！');
        return false
      }
      this.floading = true
      this.$post(this.$api.postTrendsCustomerAdd,{
        objectID: this.detailData.id,
        typeEnum: this.typeEnum,
        content: this.content,
        trendsReasonId: this.trendsReasonId
      }).then(response => {
        if (response.data.succeed) {
          this.$message({
            message: '发布成功',
            type: 'success'
          })
          this.content = ''
          this.trendsReasonId = ''
          setTimeout(() => {
            this.floading = false
            this.getTrendsList()
          }, 200);
        }
      })
    },
    handleClose() {
      //关闭弹窗
      this.detailData.show = false;
    },
    handleDownFile (row) { //附件下载
      window.location.href = this.$api.postCustomerFileDownload+'?name=' + row.fileName + '&url=' + row.url
    },
    handleCustomer () { //删除该客户
      this.$post(this.$api.postCustomerCoreDel,{ //根据id获取详情商机数据
        customerId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.handleClose()
          this.$emit('checkRender')
        }
      })
    },
    checkOpen (type) { //重新打开并向上刷新列表数据
      this.detailData.show = true
      if (type == '1') { //是点击了修改保存按钮-需刷新列表数据
        setTimeout(() => {
          this.$emit('checkRender')
        }, 200);
      }
    },
    handleDeleteUser (index,item) { //删除组内人员
      if (item.teamMemberId) {
        this.$post(this.$api.postOpportunityTeamMemberDel,{
          teamMemberId: item.teamMemberId
        }).then(response => {
          if (response.data.succeed) {
            this.$message({ type:'success',message: '删除成功'})
            this.parames.userIdList.splice(index,1)
          }
        })
      } else {
        this.parames.userIdList.splice(index,1)
      }
    },
    handleAddTeam () { //添加新成员
      this.teamData.show = true
    },
    selectUser (value) { //添加选择的成员
      let select = value //选中的数组
      let userIdList = []
      let origan = this.parames.userIdList //本身存在的数组
      select.forEach(el=>{
        let i = 0
        origan.forEach((bl,index)=>{
          if (el.userId == bl.userId) {
            i = 1
          }
        })
        if (i !== 1) {
          userIdList.push(el.userId)
        }
      })
      this.$post(this.$api.postOpportunityTeamMemberAdd,{
        teamId:  this.detailData.id,
        userIdList: userIdList
      }).then(response => {
        if (response.data.succeed) {
          this.render()
        }
      })
    },
    handleEdit (){ //编辑-修改
      this.dialogData.id = this.detailData.id
      this.dialogData.title = '编辑客户'
      this.dialogData.type = 'edit'
      this.dialogData.show = true
      this.handleClose()
    },
    handleSearch (row) { //查看添加人员详情
      this.addUserData.type = 'view'
      this.addUserData.data = JSON.stringify(row)
      this.addUserData.show = true
    },
    handleCanleUser (index,row) { //删除添加的人员信息
      this.loading = true
      this.$post(this.$api.postCustomerContactsDel,{ //根据id获取详情商机数据
        customerContactsId: row.id
      }).then(response => {
        if (response.data.succeed) {
          setTimeout(() => {
            this.loading = false
            this.render()
          }, 200);
        }
      })
    },
    handleYuan () { //变更来源
      this.laiyuanData.id = this.detailData.id
      this.laiyuanData.customerSourceType = this.parames.customerSourceType.name
      this.laiyuanData.customerSourceId = this.parames.customerSourceId
      this.laiyuanData.show = true
    },
    handlePerson () { //变更客户负责人
      this.createdData.type = 'kehu'
      this.createdData.id = this.detailData.id
      this.createdData.directorId = this.parames.directorId
      this.createdData.show = true
    },
    render () {
      this.loading = true
      this.$post(this.$api.postCustomerCoreFind,{ //根据id获取详情
        customerId: this.detailData.id
      }).then(response => {
        if (response.data.succeed) {
          this.parames = response.data.data
          this.parames.userIdList = response.data.data.teamMemberList
          this.parames.customerContactsList.forEach(el=>{
            let roleNames = []
            let contactsRole = []
            el.contactsRole.forEach(bl=>{
              roleNames.push(bl.desc)
              contactsRole.push(bl.name)
            })
            el.contactsRoleName = roleNames
            el.contactsRole = contactsRole
          })
          if (this.parames.businessInfoDO.administrativeRegion) {
            let area = this.parames.businessInfoDO.administrativeRegion
            this.parames.area = CodeToText[Number(area[0])] + '-' + CodeToText[Number(area[1])] + '-' + CodeToText[Number(area[2])]
          }
          setTimeout(() => {
            this.loading = false
          }, 200);
        }
      })
      this.$post(this.$api.postTrendsReasonList).then(response => {
        if (response.data.succeed) {
          this.trendsData = response.data.data
        }
      })
    },

    
  },
  components: {
    createCustomerdDialog,
    addUserhDialog,
    transCreated,
    transOrigin,
    setBlackList
  },
  computed: { //计算属性
    changeDialog () {
      return this.detailData.show
    }
  },
  watch: {
    changeDialog: {
      handler (curVal, oldVal) {
        if (curVal) {
          this.$utils.getEnumberation('postTrendsTrendsType','trendsTypeData',this) //动态枚举
          this.typeEnum = 'RECORD'
          let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
          if (buttonLimit.indexOf('k084') !== -1) {
            this.blackBtn = true
          }
          if (buttonLimit.indexOf('k085') !== -1) {
            this.feiBtn = true
          }
          this.render()
        } else {
          this.activeName = "info"
          this.content = ''
          this.trendsReasonId = ''
        }
      }
    },
    deep: true
  }
};
</script>

<style>
.hetong-icon .ant-collapse-arrow{
  left: 20px!important;
}
</style>
